<template>
  <table class="tableInfo" style="background-color: white">
    <tbody>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Device Name</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.productName }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">MES Lot ID</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.lotId }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Tester Config</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.testerConfig }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Real-Time Lot ID</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.rtLotID }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Test Step</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.trStep }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">MES Test Program</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.trProgram }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Real-Time Step</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.rtStep }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Real-Time Test Program</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.rtProgram }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Trackin Time</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.trackStamp }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">Operator ID</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.trOperId }}</td>
      </tr>
      <tr>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">MES Work Flow</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.processFlow }}</td>
        <td width="25%" style="background-color: rgb(217, 237, 247)">
          <label class="control-label text-info">MES Package</label>
        </td>
        <td id="Product" width="25%">{{ lotinfoForm.packageType }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: 'LotInfoTable',
  props: {
    lotinfoForm: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang='scss' scoped>
table {
    max-width: 100%;
    box-sizing: border-box;
    border-spacing:0;
}
.tableInfo {
  border: 1px solid #dddddd;
  width: 100%;
  table-layout: fixed;
  .text-info {
    color: #3a87ad;
  }
  tr td {
    padding: 0 6px;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
}
</style>
